import { Button, TextArea, Toast } from 'antd-mobile'
import './Remark.scss'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { addOrderSubRemark } from '../../../../store/modules/orderSubmit'
import type { RootState } from '../../../../store'

const Remark = () => {
    const [remark, setRemark] = useState('')
    const defRemark = useSelector((state: RootState) => {
        return state.orderSubmit.remark
    })
    console.log(defRemark)

    const navigate = useNavigate()
    const dispatch = useDispatch()
    const submitRemark = () => {
        if (remark.trim() === '') {
            Toast.show({
                content: '内容为空！'
            })
            return
        }

        dispatch(addOrderSubRemark(remark))
        navigate(-1)
    }
    useEffect(() => {
        setRemark(defRemark)
    }, [defRemark])
    const changeText = (e: string) => {
        console.log(e)
        // dispatch(changeRemark(e))
        setRemark(e)
    }
    return <div className="remark">
        <div >
            <TextArea className='textArea' value={remark} onChange={(e) => changeText(e)} placeholder='备注' autoSize={{ minRows: 3, maxRows: 5 }}></TextArea>

        </div>
        <div className='btn'>
            <Button color='primary' size='middle' onClick={submitRemark}>确认</Button>
        </div>
    </div>
}

export { Remark }